<template>
    <div class="loginContainer">
        <div class="svg-logo">
            <svg class="icon-svg" fill="#fff">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"></use>
            </svg>
            <div>短视频</div>
        </div>
        <div class="form">
            <form>
                <div class="input-box tel">
                    <div class="svg-input">
                        <svg class="icon-svg" fill="#fff">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mine"></use>
                        </svg>
                    </div>
                    <input class="input" type="text" placeholder="手机号" />
                    <div class="look"></div>
                </div>
                <div class="input-box password">
                    <div class="svg-input">
                        <svg class="icon-svg" fill="#fff">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#password"></use>
                        </svg>
                    </div>
                    <input class="input" type="password" placeholder="密码" />
                    <div class="look">
                        <div class="svg-attention">
                            <svg class="icon-svg" fill="#fff">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#attention"></use>
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="forget">
                    <router-link to="/forget">忘记密码?</router-link>
                </div>
                <div class="login">登录</div>

                <div class="register">
                    没有账号？<router-link to="/register">立即注册</router-link>
                </div>
            </form>
        </div>
        <div class="login-quick">
            <div class="title">快捷登录</div>
            <div class="type">
                <div class="svg-qq">
                    <svg class="icon-svg" fill="#fff">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#qq"></use>
                    </svg>
                </div>
                <div class="svg-weibo">
                    <svg class="icon-svg" fill="#fff">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#weibo"></use>
                    </svg>
                </div>
                <div class="svg-weixin">
                    <svg class="icon-svg" fill="#fff">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#weixin"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import alertTip from '@/components/common/alertTip'
    import {localapi, proapi, imgBaseUrl} from '@/config/env'
    import {mapState, mapMutations} from 'vuex'
    import {mobileCode, checkExsis, sendLogin, getcaptchas, accountLogin} from '@/service/getData'

    export default {
        data(){
            return {
                loginWay: false, //登录方式，默认短信登录
                showPassword: false, // 是否显示密码
                phoneNumber: null, //电话号码
                mobileCode: null, //短信验证码
                validate_token: null, //获取短信时返回的验证值，登录时需要
                computedTime: 0, //倒数记时
                userInfo: null, //获取到的用户信息
                userAccount: null, //用户名
                passWord: null, //密码
                captchaCodeImg: null, //验证码地址
                codeNumber: null, //验证码
                showAlert: false, //显示提示组件
                alertText: null, //提示的内容
            }
        },
        created(){
            this.getCaptchaCode();
        },
        components: {
            alertTip,
        },
        computed: {
            //判断手机号码
            rightPhoneNumber: function (){
                return /^1\d{10}$/gi.test(this.phoneNumber)
            }
        },
        methods: {
            ...mapMutations([
                'RECORD_USERINFO',
            ]),
            //改变登录方式
            changeLoginWay(){
                this.loginWay = !this.loginWay;
            },
            //是否显示密码
            changePassWordType(){
                this.showPassword = !this.showPassword;
            },
            //获取验证吗，线上环境使用固定的图片，生产环境使用真实的验证码
            async getCaptchaCode(){
                let res = await getcaptchas();
                this.captchaCodeImg = res.code;
            },
            //获取短信验证码
            async getVerifyCode(){
                if (this.rightPhoneNumber) {
                    this.computedTime = 30;
                    this.timer = setInterval(() => {
                        this.computedTime --;
                        if (this.computedTime == 0) {
                            clearInterval(this.timer)
                        }
                    }, 1000)
                    //判读用户是否存在
                    let exsis = await checkExsis(this.phoneNumber, 'mobile');
                    if (exsis.message) {
                        this.showAlert = true;
                        this.alertText = exsis.message;
                        return
                    }else if(!exsis.is_exists) {
                        this.showAlert = true;
                        this.alertText = '您输入的手机号尚未绑定';
                        return
                    }
                    //发送短信验证码
                    let res = await mobileCode(this.phoneNumber);
                    if (res.message) {
                        this.showAlert = true;
                        this.alertText = res.message;
                        return
                    }
                    this.validate_token = res.validate_token;
                }
            },
            //发送登录信息
            async mobileLogin(){
                if (this.loginWay) {
                    if (!this.rightPhoneNumber) {
                        this.showAlert = true;
                        this.alertText = '手机号码不正确';
                        return
                    }else if(!(/^\d{6}$/gi.test(this.mobileCode))){
                        this.showAlert = true;
                        this.alertText = '短信验证码不正确';
                        return
                    }
                    //手机号登录
                    this.userInfo = await sendLogin(this.mobileCode, this.phoneNumber, this.validate_token);
                }else{
                    if (!this.userAccount) {
                        this.showAlert = true;
                        this.alertText = '请输入手机号/邮箱/用户名';
                        return
                    }else if(!this.passWord){
                        this.showAlert = true;
                        this.alertText = '请输入密码';
                        return
                    }else if(!this.codeNumber){
                        this.showAlert = true;
                        this.alertText = '请输入验证码';
                        return
                    }
                    //用户名登录
                    this.userInfo = await accountLogin(this.userAccount, this.passWord, this.codeNumber);
                }
                //如果返回的值不正确，则弹出提示框，返回的值正确则返回上一页
                if (!this.userInfo.user_id) {
                    this.showAlert = true;
                    this.alertText = this.userInfo.message;
                    if (!this.loginWay) this.getCaptchaCode();
                }else{
                    this.RECORD_USERINFO(this.userInfo);
                    this.$router.go(-1);

                }
            },
            closeTip(){
                this.showAlert = false;
            }
        }
    }

</script>

<style lang="scss" scoped>
    @import 'src/style/mixin';

    .loginContainer{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: -webkit-linear-gradient(270deg, rgba(255, 195, 113, 1) 0%, rgba(255, 195, 113, 1) 0%, rgba(255, 95, 109, 1) 100%, rgba(255, 95, 109, 1) 100%);
        background: -moz-linear-gradient(180deg, rgba(255, 195, 113, 1) 0%, rgba(255, 195, 113, 1) 0%, rgba(255, 95, 109, 1) 100%, rgba(255, 95, 109, 1) 100%);
        background: linear-gradient(180deg, rgba(255, 195, 113, 1) 0%, rgba(255, 195, 113, 1) 0%, rgba(255, 95, 109, 1) 100%, rgba(255, 95, 109, 1) 100%);
        
        .svg-logo {
            margin: 4rem auto 2rem auto;
            text-align: center;
            color:#fff;
            .icon-svg {
                width: 3rem;
                height: 3rem;
            }
        }
        .form {
            width: 70%;
            margin: 0 auto;
            font-size: 0.6rem;
            .svg-input {
                width: 1.5rem;
            }
            a {
                color:#fff;
            }
        }
        .forget {
            text-align: right;
            line-height: 1.5rem;
        }
        .register{
            text-align: center;
            color:#fff;
        }
        .login{
            width: 100%;
            height: 2rem;
            line-height: 2rem;
            border-radius: 2rem;
            text-align: center;
            background: rgba(255,255,255,.5);
            color:#F86254;
            margin: 0.5rem 0; 
        }
        .input-box{
            display: flex;
            justify-content:space-between;
            border-bottom: 1px solid #fff;
            padding: 1rem 0 0.5rem 0;
            .input {
                width: 100%;
                color:#fff;
                background: transparent;
                // background: #ccc;
            }
            .look{
                width: 1rem;
            }
            .icon-svg {
                width: 0.8rem;
                height:0.8rem;
            }
        }

        ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
            color:#fff;
        }
        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color:#fff;
        }
        ::-moz-placeholder { /* Mozilla Firefox 19+ */
            color:#fff;
        }
        :-ms-input-placeholder { /* Internet Explorer 10-11 */
            color:#fff;
        }
    }
    .login-quick {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        padding-bottom: 0.7rem;
        .title {
            text-align: center;
            font-size: 0.6rem;
            padding-bottom: 0.7rem;
            color:#fff;
        }
        .type{
            width: 40%;
            margin: 0.5rem auto;
            display: flex;
            justify-content:space-between;
        }
        .type>div {
            width: 1.6rem;
            height: 1.6rem;
            background: rgba(255,255,255, .5);
            border-radius: 50%;
        }
        .icon-svg {
            width: 1.2rem;
            height:1.2rem;
            margin: 0.2rem 0 0 0.2rem;
        }

    }
</style>
